<script setup lang="ts">
import Cookies from 'js-cookie'

import { systemStore } from '@/stores/modules/system'
const useSystemStore = systemStore()
const domainUrl = computed(() => useSystemStore.domain)
const headerRef = ref()
const handleScroll = () => {
  const { y } = document.body.getBoundingClientRect()
  if (typeof y === 'number' && y < 0) {
    headerRef.value?.classList?.add?.('scrolled')
  } else {
    headerRef.value?.classList?.remove?.('scrolled')
  }
}
const visible = ref(false)
const handleClick = () => {
  visible.value = true
}
const handleOk = () => {
  visible.value = false
  handleLogout()
}
const handleCancel = () => {
  visible.value = false
}
const userToken = ref('')
const handleUserCenter = () => {
  window.location.href = `${domainUrl.value}/user-center`
}
const handleLogout = () => {
  userToken.value = ''
  const domain = window.location.hostname.split('.').slice(-2).join('.')
  Cookies.remove('token', {
    domain: domain,
    path: '/'
  })
}
onMounted(async () => {
  await nextTick()
  window.addEventListener('scroll', handleScroll)
  // 获取cookies里的token
  userToken.value = Cookies.get('token') || ''
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <div ref="headerRef" class="website-header">
    <div class="fixed-container h-full flex items-center">
      <app-logo />
      <i class="flex-1"></i>
      <!-- <a @click.prevent class="header-btn" href="#">登录</a> -->
      <div v-if="!userToken" class="flex items-center">
        <a class="header-btn is-default" :href="domainUrl">
          <!-- <i-hb-avatar class="mr-1"></i-hb-avatar> -->
          <span class="text">控制台</span>
        </a>
        <a
          v-shadow="{ filter: 8, radius: 6 }"
          class="header-btn is-primary"
          :href="domainUrl"
        >
          登录/注册
        </a>
      </div>
      <div v-else class="flex items-center">
        <a
          class="header-btn is-primary"
          v-shadow="{ filter: 8, radius: 6 }"
          :href="domainUrl"
        >
          控制台
        </a>
        <a-tooltip
          content="This is tooltip content"
          background-color="#ffffff"
          position="bottom"
          :popup-container="headerRef"
          content-class="custom-popper"
        >
          <img src="@/assets/images/avatar.png" alt="" class="w-8 h-8 ml-4" />
          <template #content>
            <div class="flex flex-col">
              <div
                class="text-[#41464F] flex items-center px-6 py-2 cursor-pointer rounded-lg hover:bg-[rgba(78,89,105,0.05)]"
                @click="handleUserCenter()"
              >
                <i-hb-avatar></i-hb-avatar>
                <span class="text-sm ml-2 pr-3">个人中心</span>
              </div>
              <div
                class="text-[#41464F] flex items-center px-6 py-2 cursor-pointer rounded-lg hover:bg-[rgba(78,89,105,0.05)]"
                @click="handleClick()"
              >
                <i-hb-logout></i-hb-logout>
                <span class="text-sm ml-2 pr-3">退出登录</span>
              </div>
            </div>
          </template>
        </a-tooltip>
      </div>
    </div>
    <a-modal
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      okText="确定"
      cancelText="取消"
      unmountOnClose
    >
      <template #title>操作确认</template>
      <div class="flex items-center ml-4">
        <i-hb-info class="mr-2"></i-hb-info>
        <span>确定退出系统吗？</span>
      </div>
    </a-modal>
  </div>
</template>

<style scoped lang="less">
.website-header {
  @apply fixed h-17 top-0 w-full z-99 flex items-center;
  backdrop-filter: blur(5px);
  transition:
    background-color 500ms cubic-bezier(0.645, 0.045, 0.355, 1),
    top 500ms cubic-bezier(0.645, 0.045, 0.355, 1);

  &.scrolled {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  }
  /* views/HomeView.vue 中设置此 class */
  &.is-hidden {
    @apply -top-17;
  }

  .header-btn {
    @apply inline-flex items-center px-8 no-underline;
    display: flex;
    padding: 6px 16px;
    align-items: flex-start;
    color: #1562fc;
    font-family: PingFang SC;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.3);
    &.is-primary {
      color: #fff;
      background: linear-gradient(90deg, #1462fc 0%, #07a0ff 100%);
      border: none;
      line-height: 20px;
    }
    &.is-default {
      background: rgba(255, 255, 255, 0.3);
      .text {
        background: linear-gradient(90deg, #1462fc 0%, #07a0ff 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    & + .header-btn {
      margin-left: 16px;
    }
  }
  :deep(.custom-popper) {
    padding: 8px;
    box-shadow: 0px 5px 35px rgba(0, 0, 0, 0.08);
    border-radius: 14px;
  }
}
</style>
<style lang="less">
.arco-modal {
  border-radius: 8px;
  overflow: hidden;
  .arco-modal-header {
    border-bottom: none;
    padding: 0 24px;
    height: 54px;
    background: linear-gradient(180deg, #ebf3fa 0%, #fff 100%);
    .arco-modal-title {
      justify-content: left;
      font-size: 12px;
      color: #1f2329;
      font-family: 'PingFang SC medium';
    }
  }
  .arco-modal-body {
    color: #323538;
    font-size: 12px;
  }
  .arco-modal-footer {
    border-top: none;
    padding: 16px 24px;
    .arco-btn {
      font-size: 12px;
      padding: 0 24px;
      border-radius: 4px;
      &.arco-btn-secondary {
        background-color: #fff;
        border: 1px solid #eceff2;
        &:hover {
          border-color: #d3d6d9;
        }
        &:active {
          border-color: #eceff2;
        }
      }
      &.arco-btn-primary {
        background-color: #1562fc;
        &:hover {
          background-color: #3f7efc;
        }
        &:active {
          background-color: #1359e5;
        }
      }
    }
  }
}
</style>
